<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="/WEB-INF/tlds/authorizetag.tld" prefix="px"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>门店操作</title>
<link href="/admin/public/bootstrap.min.css" title="" rel="stylesheet" />
<link href="/admin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<link href="/admin/public/animate.css" rel="stylesheet">
<link rel="stylesheet" href="/admin/public/inspinia.css" />
<link rel="stylesheet" href="/admin/css/pop-up.css" />
<link rel="stylesheet" href="/admin/css/plugins/toastr/toastr.min.css" />
<link rel="stylesheet" type="text/css"
	href="${request.getContext }/admin/css/xcConfirm.css" />
<!-- 高德地图 -->
<link rel="stylesheet"
	href="http://cache.amap.com/lbs/static/main1119.css" />
<!-- 本地 -->
<script type="text/javascript"
	src="http://webapi.amap.com/maps?v=1.3&key=064fca579fe2d6c213c9c416d17b0a60&plugin=AMap.Autocomplete"></script>
<!-- 百度编译器 -->
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/js/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="/admin/js/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/admin/js/ueditor.all.min.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
	<script src="/admin/public/html5shiv.min.js"></script>
	<script src="/admin/public/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.img{
	height: 214px;
	width:640px;
}
</style>
</head>
<body>
	<div id="wrapper" class="container">
		<div class="wrapper wrapper-content">
			<div class="right_box">
				<div style="border: none; box-shadow: none;" class="right_one row">
					<div class="col-md-12 col-sm-12 col-xs-12" style="float: left;">
						<!-- 添加 -->
						<form class="form-horizontal" method="post" id="addClient"
							novalidate="novalidate" enctype="multipart/form-data">
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店名称:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="shopName"
										name="shopName" value="${shopName }">

								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店电话:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="telephone"
										name="telephone" value="${telephone }" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店图片:</label>
								<div class="col-lg-6">
									<input type="file" class="form-control" id="picUrl"
										name="picUrl" value="${picUrl }" onchange="preview(this,1)">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<span style="color:red;">建议图片尺寸：640*214</span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<div id="preview1">
										<img src="${picUrl }" alt="" height="214px" width="640px"/>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店简介:</label>
								<div class="col-lg-6">
									<%-- <input type="text" class="form-control" id="jianjie"
										name="jianjie" value="${jianjie }"> --%>
									<%-- <textarea rows="6" cols="80" id="jianjie" name="jianjie">
										${jianjie }
									</textarea> --%>
									<script id="editor1" type="text/plain" name="jianjie"  style="width:504px;height:200px;">${jianjie }</script>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店简介图片:</label>
								<div class="col-lg-6">
									<input type="file" class="form-control" id="jianjeurl"
										name="jianjeurl" value="${jianjeurl }"
										onchange="preview(this,2)">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<span style="color:red;">建议图片尺寸：640*214</span>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"></label>
								<div class="col-lg-6">
									<div id="preview2">
										<img src="${jianjeurl }" alt="" height="214px" width="640px"/>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">注意事项:</label>
								<div class="col-lg-6">
									<%-- <input type="text" class="form-control" id="remark"
										name="remark" value="${remark }"> --%>
									<%-- <textarea rows="6" cols="80" id="remark" name="remark">
										${remark }
									</textarea> --%>
									<script id="editor2" type="text/plain" name="remark"  style="width:504px;height:200px;">${remark }</script>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">如何上课:</label>
								<div class="col-lg-6">
									<%-- <input type="text" class="form-control" id="remark"
										name="remark" value="${remark }"> --%>
									<%-- <textarea rows="6" cols="80" id="remark" name="remark">
										${remark }
									</textarea> --%>
									<script id="editor3" type="text/plain" name="rhsk"  style="width:504px;height:200px;">${rhsk }</script>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label"><span style="color:red;">*</span>门店地址:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="shopaddress"
										name="shopaddress" value="${shopaddress }" >
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">经度:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="jingdu"
										name="jingdu" value="${jingdu }" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-2 control-label">纬度:</label>
								<div class="col-lg-6">
									<input type="text" class="form-control" id="weidu" name="weidu"
										value="${weidu }" readonly="readonly">
								</div>
							</div>
							<div>
								<input type="hidden" value="${province }" name="province" id="province"/>
								<input type="hidden" value="${city }" name="city" id="city"/>
								<input type="hidden" value="${district }" name="district" id="district"/>
							</div>
							<div class="form-groups" style="overflow: hidden; height: 360px;">
								<div class="col-lg-9">
									<div id="container" style="width: 800px; height: 320px"></div>
									<div id="myPageTop">
										<table>
											<tr>
												<td><label>按关键字搜索：</label></td>
											</tr>
											<tr>
												<td><input type="text" placeholder="请输入关键字进行搜索"
													id="tipinput" /></td>
											</tr>
										</table>
									</div>
								</div>
							</div>
							<px:authorize setting="门店-添加门店信息">
								<input type="button" onclick="add();" style="display: none;"
									id="tijiao" value="添加" />
							</px:authorize>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/admin/public/jquery-1.11.3.js"></script>
	<script src="/admin/public/bootstrap.min.js" type="text/javascript"></script>
	<script src="${request.getContext }/admin/js/xcConfirm.js"
		type="text/javascript" charset="utf-8"></script>
	<script src="/admin/js/plugins/toastr/toastr.min.js"></script>
	<script src="/admin/js/new_page.js"></script>
	<!-- ajax上传文件要的包 -->
	<script src="/admin/js/jquery.form.min.js"></script>
	<script type="text/javascript">
		var ue=UE.getEditor('editor1');
		var ue=UE.getEditor('editor2');
		var ue = UE.getEditor('editor3', {
		 	"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
		    "imageFieldName": "upfile", /* 提交的图片表单名称 */
		    "imageMaxSize": 2048000, /* 上传大小限制，单位B */
		    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
		    "imageCompressEnable": false, /* 是否压缩图片,默认是true */
		    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
		    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
		    "imageUrlPrefix": "", /* 图片访问路径前缀 */
		    "imagePathFormat": "/upload/content/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
		                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
		                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
		                                /* {time} 会替换成时间戳 */
		                                /* {yyyy} 会替换成四位年份 */
		                                /* {yy} 会替换成两位年份 */
		                                /* {mm} 会替换成两位月份 */
		                                /* {dd} 会替换成两位日期 */
		                                /* {hh} 会替换成两位小时 */
		                                /* {ii} 会替换成两位分钟 */
		                                /* {ss} 会替换成两位秒 */
		                                /* 非法字符 \ : * ? " < > | */
		                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
		                                
			    	   /* 上传视频配置 */
			    "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */
			    "videoFieldName": "upfile", /* 提交的视频表单名称 */
			    "videoPathFormat": "/upload/content/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
			    "videoUrlPrefix": "", /* 视频访问路径前缀 */
			    "videoMaxSize": 734003200, /* 上传大小限制，单位B，默认100MB 此处限制700M*/
			    "videoAllowFiles": [
			        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
			        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
		        
		        /* 上传文件配置 */
		        "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */
		        "fileFieldName": "upfile", /* 提交的文件表单名称 */
		        "filePathFormat": "/upload/content/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
		        "fileUrlPrefix": "", /* 文件访问路径前缀 */
		        "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */
		        "fileAllowFiles": [
		            ".png", ".jpg", ".jpeg", ".gif", ".bmp",
		            ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
		            ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
		            ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
		            ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
		        ], /* 上传文件格式显示 */
		        serverUrl: '/admin/content/uploadimage'
	});
		function preview(file, i) {
			var prevDiv = document.getElementById('preview' + i);
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img class="img" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
		
	</script>
	<script type="text/javascript">
		//去掉文本框换行符
		document.getElementById('jianjie').value=document.getElementById('jianjie').value.replace(/\s/gi,'')
		document.getElementById('remark').value=document.getElementById('remark').value.replace(/\s/gi,'')
		function check() {
			var shopName = $("#shopName").val();
			var telephone = $("#telephone").val();
			var picUrl = $("#picUrl").val();
			//var jianjie = $("#jianjie").val();
			var jianjeurl = $("#jianjeurl").val();
			var jingdu = $("#jingdu").val();
			var weidu = $("#weidu").val();
			var shopaddress = $("#shopaddress").val();
			if (shopName == null || shopName == '') {
				alertNew("门店名称不得为空", false);
				return false;
			}
			if (telephone == null || telephone == '') {
				alertNew("门店电话不得为空", false);
				return false;
			}
			if (picUrl == null || picUrl == '') {
				alertNew("门店图片不得为空", false);
				return false;
			}
			/* if (jianjie == null || jianjie == '') {
				alertNew("门店简介不得为空", false);
				return false;
			} */
			if (jianjeurl == null || jianjeurl == '') {
				alertNew("门店简介图片不得为空", false);
				return false;
			}
			if (shopaddress == null || shopaddress == '') {
				alertNew("门店地址不得为空", false);
				return false;
			}
			return true;

		}
		//添加门店
		function add() {
			if (check()) {
				//表单提交
				$('#addClient').ajaxSubmit({
					type : "post",
					data : $("#addClient").serialize(),
					dataType : "json",
					enctype:"multipart/form-data",
					url : "/admin/shop/addShop",
					success : function(data) {
						if (data.success) {
							window.wxc.xcConfirm(data.msg, window.wxc.xcConfirm.typeEnum.info,{onOk:function(){ 
								$('#ifr', window.parent.document).attr('src',
								'/admin/shop/list');
					  		}})
						}else{
							alertNew(data.msg, false);
						}
					},
					error : function(data) {
						alert("很抱歉，未知的错误发生了！");
					}
				});
				/* var formData = new FormData($("#addClient")[0]);
				$.ajax({
					url : '/admin/shop/addShop',
					type : 'POST',
					data : formData,
					async : false,
					cache : false,
					contentType : false,
					processData : false,
					success : function(data) {
						if (data.success) {
							window.wxc.xcConfirm(data.msg, window.wxc.xcConfirm.typeEnum.info,{onOk:function(){ 
								$('#ifr', window.parent.document).attr('src',
								'/admin/shop/list');
					  		}})
						}else{
							alertNew(data.msg, false);
						}
					},
					error : function(data) {
						alert("很抱歉，未知的错误发生了！");
					}
				}); */
			}
		}
	</script>
	<script type="text/javascript">
		//中心点
		if ($("[name='jingdu']").val().length != 0) {
			var dw = [ $("[name='jingdu']").val(), $("[name='weidu']").val() ];
		} else {
			var dw = [ 121.471253, 31.2216 ];
		}
		var map = new AMap.Map('container', {
			resizeEnable : true,
			zoom : 10,
			center : dw

		});
		//加入经纬度
		$(function() {
			if ($("[name='jingdu']").val().length != 0) {
				addMarker($("[name='jingdu']").val(), $("[name='weidu']").val());
			}
		})
		//为地图注册click事件获取鼠标点击出的经纬度坐标
		var clickEventListener = map.on('click', function(e) {
			addMarker(e.lnglat.getLng(), e.lnglat.getLat());
			$("[name='jingdu']").val(e.lnglat.getLng());
			$("input[name='weidu']").val(e.lnglat.getLat());
			lnglatXY = [ e.lnglat.getLng(), e.lnglat.getLat() ]; //已知点坐标
			  map.getCity(function(data) {
			     if (data['province'] && typeof data['province'] === 'string') {
			         //alert(data.province)//省
			         //alert(data.city)//市
			         //alert(data.district)//区
			         //alert(data.citycode)//区号
			         $("#province").val(data.province);
			         $("#city").val(data.city);
			         $("#district").val(data.district);
					 if(data.province == "北京市"){
						 $("#city").val("北京市");
			         }
					 if(data.province == "上海市"){
						 $("#city").val("上海市");
			         }
					 if(data.province == "重庆市"){
						 $("#city").val("重庆市");
			         }
					 if(data.province == "天津市"){
						 $("#city").val("天津市");
			         }
			     }
			 });
			//获取位置
			regeocoder();
		});

		//显示位置
		function regeocoder() { //逆地理编码
			var geocoder;
			AMap.plugin([ 'AMap.Geocoder' ], function() {
				geocoder = new AMap.Geocoder({
					radius : 1000,
					extensions : "all"
				});
			});

			geocoder.getAddress(lnglatXY, function(status, result) {
				if (status === 'complete' && result.info === 'OK') {
					if ($(".amap-indoormap-floorbar-control").is(":visible")) {//楼层条是否显示
						door = $(".selected").find("div").html();
						$("input[name='shopaddress']").val(
								result.regeocode.formattedAddress + door);
					} else {
						$("input[name='shopaddress']").val(
								result.regeocode.formattedAddress);
					}
				}
			});
		}
		//查询功能
		var auto = new AMap.Autocomplete({
			input : "tipinput"
		});
		AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
		function select(e) {
			if (e.poi && e.poi.location) {
				map.setZoom(15);
				map.setCenter(e.poi.location);
			}
		}

		//加标记
		var markers = [];
		function addMarker(lng, lat) {
			map.remove(markers);
			marker = new AMap.Marker(
					{
						icon : "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
						position : [ lng, lat ]
					});
			marker.setMap(map);
			markers.push(marker);
		}

		/*1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111*/

		var noResultsMatch = '没有匹配结果';
		var defaultChosenOptions = {
			no_results_text : noResultsMatch,
			width : '100%',
			allow_single_deselect : true,
			disable_search_threshold : 1,
			placeholder_text_single : ' ',
			placeholder_text_multiple : ' ',
			search_contains : true
		};
		var config = {
			'.chosen-select' : {},
			'.chosen-select-deselect' : {
				allow_single_deselect : true
			},
			'.chosen-select-no-single' : {
				disable_search_threshold : 10
			},
			'.chosen-select-no-results' : {
				no_results_text : 'Oops, nothing found!'
			},
			'.chosen-select-width' : {
				width : "95%"
			}
		}
		for ( var selector in config) {
			$(selector).chosen(config[selector]);
		}
	</script>
</body>
</html>
